<style>
	.goods-wall{
		width:800px;
	}
	
	.m-fixed{
		position: fixed;
		width:100%;
		
	}
</style>

<div class="header" id="header" style="height: 40px;width: 800px">
			<div class="m-nav m-fixed" style="width: 800px">
				<div class="  ">
					<ul class="channel clearfix">
						<li>
							<?php echo CHtml::link('最新',array('webgl/facility/','pageNo'=>1,'pageSize'=>4),array( 'class'=>"on"))?>
						</li>
						<li>
							<?php echo CHtml::link('test',array('webgl/build/'))
							?>
						</li>
						<li>
							<?php echo CHtml::link('我装修',array('webgl/test/'))?>
						</li>
						<li>
							<?php echo CHtml::link('我的房',array('webgl/showHouse/'))?>
						</li>
					</ul>
					
				</div>
			</div>
		</div>

<div div class="goods-wall" style="height: 400px; opacity: 1; top:30px ">
	<?php

if($facilities){
$colum=0;
$row=0;
foreach ($facilities as $f){

$left=240*$colum;
$leftpx=$left.'px';
$top=310*$row;
$style="left:".$left.'px;'."top:".$top.'px';

	?>
	
	<script> 

		$("<?php echo '#'.$f->goodsName?>").click(function(event){
			build.choiceFacility(<?php echo json_encode($f)?>);
    


			$.fancybox.close();
	  	});
	</script>	
	<div class="goods" id="<?php echo $f->goodsName ?>" style="<?php echo $style?>">
		<div class="goods-pic" >
			<?php echo CHtml::image($f->thumbPath,'',array('height'=>'210px'))?>
		</div>
		<div class="goods-stat clearfix">
			<span class="like-num">使用: <em class="like-count">5 </em></span>
			<span class="fr ml5">评论: 12</span>
		</div>
		<ul class="comments">
			<li>
				<?php echo $f->description
				?>
			</li>
		</ul>
	</div>
	<?php
	$colum++;
	if($colum == 3) {
		$colum = 0;
		$row++;
	}
	}
	}
	?>
	
</div>
<script type="text/javascript" charset="utf-8">
	$(function() {
		// $(".goods-wall")[0].focus();
// $(".goods-wall").attr('width')
		var pageNo = 2;
		var pageSize = 1;
		// alert($(document).height()-$(window).height()-200);
		// 	lazy load不好用，废止。

		// $("img").lazyload({
		// effect : "fadeIn"
		// });
		var height = $('.goods').height();
		// var height = gHeight.substring(0, gHeight.length - 2);

		var loadTag = $(document).height()-$(document).height-200;
		$('.goods').mouseover(function() {
			// alert('dd');
		});
		var row=<?php echo $row+1?>;
		$(window).scroll(function() {

			if($(this).scrollTop() > loadTag) {
				console.warn($(this).scrollTop() + ";" + loadTag);
				// if(row<=20){
					$.post(loadFacilityUrl, {
					pageNo : pageNo,
					pageSize : pageSize
				}, function(data) {
					console.warn(pageNo);
					console.warn(data);
					// $('.goods-wall').append(data);
					data=eval(data);
					var colum=0;
					for (var i =0;i<data.length;i++){
					var d=data[i];
					var left=240*colum;
					var top=310*row;
					style="left:"+left+'px;'+"top:"+top+'px';

					var goods=$("<div class=goods style="+style+"></div>");
					var url=showFacilityDetailUrl+"&geometry="+d.geometry+"&id="+d._id.$id+"&goodsName="+d.goodsName+"&description="+d.description;
					var goods_pic=$("<div class=goods-pic ><a alt="+d.goodsName+" title="+d.goodsName+" href="+url+"><img height='210px' src="+d.thumbPath+"></a></div>");
					goods.append(goods_pic);
					
					var goods_stat=$("<div class=goods-stat clearfix><span class=like-num>使用: <em class=like-count>5 </em></span><span class=fr ml5>评论: 12</span></div>");
					goods.append(goods_stat);
					
					var comment=$("<ul class=comments><li>"+d.description+"</li></ul>");
					goods.append(comment);					
					$('.goods-wall').append(goods);
					colum++;
						if(colum == 4) {
							colum = 0;
							row++;
						}
					}
					pageNo++;
					var goodsWallHeight=$(".goods-wall").height()+row*(310+10);
					$(".goods-wall").css({"height":goodsWallHeight+'px'});
				});
				// }
				
				loadTag = loadTag + height;
				console.warn($(this).scrollTop() + ";" + loadTag);
				
			}
		});
	});
	
</script>